import { useEffect } from 'react';
import { View, Text, StyleSheet, ScrollView } from 'react-native';
import { useSetState } from '../../../common/hooks';
import util from '../../../common/utils/util';
import * as  FORM from '../../../components/Form';
import Constant from '../../../constant/Constant';
import { CColor, CFlex } from '../../../constant/css';
import { RootView } from '../../../components/Layout';

export default function Tab() {
    const [state, setState] = useSetState({
        userInfo: {}
    })
    useEffect(() => {
        getUserInfo()
    }, [])

    const getUserInfo = async () => {
        const [err, userInfo] = await util.getLocalStore(Constant.LOGIN_TOKEN_KEY)
        if (err) return util.showError(err)
        const [jsonErr, json] = util.toJson(userInfo)
        if (jsonErr) return util.showError(jsonErr)
        setState({
            userInfo: json
        })
    }

    const renderHeader = () => {
        const { avatar, name, token } = state.userInfo
        return (
            <View style={[CFlex.row, CFlex.ss]}>
                <FORM.ExpoImage style={styles.userAvatar} contentFit="cover"
                    source={avatar ? { uri: avatar } : require('./../../../assets/favicon.png')} />
                <View style={{ paddingTop: 10 }}>
                    <Text style={styles.userName}>{name}</Text>
                </View>
            </View>
        )
    }

    const renderCard = () =>
        <View style={{
            borderWidth: 1,
            height: 100,
            marginTop: 20,
            borderRadius: 5,
            borderColor: CColor.DeepGray,
            ...CFlex.cc
        }}>
            <Text>其他内容</Text>
        </View>

    return (
        <RootView>
            <ScrollView
                showsVerticalScrollIndicator={false}
                contentContainerStyle={{ margin: 12 }}
            >
                {renderHeader()}
                {renderCard()}
                {renderCard()}
                {renderCard()}
                {renderCard()}
            </ScrollView>
        </RootView>
    );
}


const styles = StyleSheet.create({
    userAvatar: {
        width: 70,
        height: 70,
        borderRadius: 70,
        marginRight: 20,
    },
    userName: {
        fontSize: 18,
        fontWeight: 'bold',
    }
})
